<template>
  <div id="lazyload" class="">
    <ul>
      <li v-for="item in discList" class="">
        <div class="icon">
          <img v-lazy="item.imgurl" alt="">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

  //https://github.com/hilongjw/vue-lazyload

  export default {
    name: 'lazyload',
    data() {
      return {
        discList: [
          {
            "imgurl": "http://p.qpic.cn/music_cover/OxYJ3e12Q1MiaibkTa8iaSjoKTaj1NtVA1RT6ibUqENHB633tI3Cc6HuSQ/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/llTQ9l2AeicK2OLIORnsUdqhLRIdrgcW27OZxU7tekSfZUZCXmYnjrw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/xJLWlNicFPzWw3p1m4U86nRH7VG5jeT2bZd1YdhpGKdaRr6dckiczm7A/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/PJrGzQib7nia43112ibFrSia1LACNia0EZ6Sb0miakcjox0QpwDPMtVndaDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/J64RvyhQtdjd9bWzGSbsoJgFaib9AGRGAiaIC8DibzpgP5C9bAibBYlPVQ/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/UYaunx856XZrhEh6IpyK6guEibTCBpMpLnjjIfrf80PuJerOoXKwucg/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamHHbfYPdUvJAPbuuyoZYqCUmLfgrYKp5gw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamMHPScQYsehlEUYs9oicZI3JWpI0sxufAEA/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/llTQ9l2AeicK2OLIORnsUdqhLRIdrgcW27OZxU7tekSfZUZCXmYnjrw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/xJLWlNicFPzWw3p1m4U86nRH7VG5jeT2bZd1YdhpGKdaRr6dckiczm7A/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/hnETBDZGVakiapcylpyxhC1wAZPxHcuBicWAPBI93DfVj80eLxHIGCDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/PJrGzQib7nia43112ibFrSia1LACNia0EZ6Sb0miakcjox0QpwDPMtVndaDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/J64RvyhQtdjd9bWzGSbsoJgFaib9AGRGAiaIC8DibzpgP5C9bAibBYlPVQ/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/UYaunx856XZrhEh6IpyK6guEibTCBpMpLnjjIfrf80PuJerOoXKwucg/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamHHbfYPdUvJAPbuuyoZYqCUmLfgrYKp5gw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamMHPScQYsehlEUYs9oicZI3JWpI0sxufAEA/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/llTQ9l2AeicK2OLIORnsUdqhLRIdrgcW27OZxU7tekSfZUZCXmYnjrw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/xJLWlNicFPzWw3p1m4U86nRH7VG5jeT2bZd1YdhpGKdaRr6dckiczm7A/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/hnETBDZGVakiapcylpyxhC1wAZPxHcuBicWAPBI93DfVj80eLxHIGCDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/PJrGzQib7nia43112ibFrSia1LACNia0EZ6Sb0miakcjox0QpwDPMtVndaDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/J64RvyhQtdjd9bWzGSbsoJgFaib9AGRGAiaIC8DibzpgP5C9bAibBYlPVQ/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/UYaunx856XZrhEh6IpyK6guEibTCBpMpLnjjIfrf80PuJerOoXKwucg/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamHHbfYPdUvJAPbuuyoZYqCUmLfgrYKp5gw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamMHPScQYsehlEUYs9oicZI3JWpI0sxufAEA/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/llTQ9l2AeicK2OLIORnsUdqhLRIdrgcW27OZxU7tekSfZUZCXmYnjrw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/xJLWlNicFPzWw3p1m4U86nRH7VG5jeT2bZd1YdhpGKdaRr6dckiczm7A/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/hnETBDZGVakiapcylpyxhC1wAZPxHcuBicWAPBI93DfVj80eLxHIGCDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/PJrGzQib7nia43112ibFrSia1LACNia0EZ6Sb0miakcjox0QpwDPMtVndaDw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/J64RvyhQtdjd9bWzGSbsoJgFaib9AGRGAiaIC8DibzpgP5C9bAibBYlPVQ/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/UYaunx856XZrhEh6IpyK6guEibTCBpMpLnjjIfrf80PuJerOoXKwucg/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamHHbfYPdUvJAPbuuyoZYqCUmLfgrYKp5gw/600?n=1",
          },
          {
            "imgurl": "http://p.qpic.cn/music_cover/KaFn5hQACzzVeLFOc4hamMHPScQYsehlEUYs9oicZI3JWpI0sxufAEA/600?n=1",
          }
        ]
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      handleScroll(){
        // 得到页面滚动的距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        console.log(scrollTop);
        // 判断页面滚动的距离是否大于吸顶元素的位置
        //this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2);
      }
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll);
    }
  }
</script>

<style lang="scss" scoped>

  .icon {
    margin-bottom: .5rem;
    text-align: center;
  }

  .icon img {
    width: 1.2rem;
    height: 1.2rem;
  }

</style>
